<template>
  <div
    class="relative bg-gradient-to-b from-indigo-400/10 via-indigo-400/20 to-white  "
  >
    <header
      class="w-full h-24 flex justify-between items-center px-4 sm:px-6 lg:px-8"
    >
      <LogoSvg />
      <div class="hidden md:block text-blue-500 tracking-wider font-mono">
        04-06 of April, 2022 ◇ Los Angeles, CA
      </div>
      <a class="px-6 py-2 bg-blue-500 rounded-lg text-white hidden md:block"
        >Get your tickets</a
      >
      <img
        src="https://keynote.tailwindui.com/_next/static/media/background.6c3571e0.jpg"
        class="absolute -z-0  bottom-0 left-0 w-1/2 -translate-x-1/3 opacity-30"
      />
    </header>

    <div
      class="px-4 mx-auto w-full sm:w-[40rem] lg:w-[50rem] pt-20 lg:text-2xl"
    >
      <h2
        class="text-5xl lg:text-6xl font-mono font-semibold py-4 text-blue-600 break-words"
      >
        A design conference for the dark side.
      </h2>
      <p class="text-blue-700 font-light leading-loose mt-6">
        The next generation of web users are tech-savvy and suspicious. They
        know how to use dev tools, they can detect a phishing scam from a mile
        away, and they certainly aren’t accepting any checks from Western Union.
      </p>
      <p class="text-blue-700 font-light leading-loose mt-4">
        At DeceptiConf you’ll learn about the latest dark patterns being
        developed to trick even the smartest visitors, and you’ll learn how to
        deploy them without ever being detected.
      </p>
      <ul class="text-sm w-full grid grid-cols-2 lg:grid-cols-4 mt-10 gap-4">
        <li>
          <p class="text-blue-400 font-mono">Speakers</p>
          <p class="text-blue-900 font-sans text-2xl font-semibold">18</p>
        </li>
        <li>
          <p class="text-blue-400 font-mono">People Attending</p>
          <p class="text-blue-900 font-sans text-2xl font-semibold">2,910</p>
        </li>
        <li>
          <p class="text-blue-400 font-mono">Venue</p>
          <p class="text-blue-900 font-sans text-2xl font-semibold">
            Staples Center
          </p>
        </li>
        <li>
          <p class="text-blue-400 font-mono">Location</p>
          <p class="text-blue-900 font-sans text-2xl font-semibold">
            Los Angeles
          </p>
        </li>
      </ul>
    </div>
  </div>
  <div class="relative w-screen bg-gradient-to-t from-indigo-400/10 via-indigo-400/20 to-white pt-20">
    <div class="px-4 sm:p-0 sm:w-[56rem] lg:w-[68rem] mx-auto">
      <h2 class="text-blue-600 text-5xl font-sans font-nomal mb-6">
      Our three day schedule is jam-packed with brilliant, creative, evil geniuses.
    </h2>
    <p class="text-blue-900   lg:text-xl mb-8">
      The worst people in our industry giving the best talks you’ve ever seen. Nothing will be recorded and every attendee has to sign an NDA to watch the talks.
    </p>
      <ul class="grid grid-cols-1 px-4 sm:px-0 sm:grid-cols-3 gap-6 py-14 text-center shadow-blue-900/5 bg-transparent">
        <li class="bg-white/80 p-4 backdrop-blur  shadow-xl">
          <h3 class="text-blue-700   text-xl mb-2">April 4</h3>
          <p class="text-blue-900   lg:text mb-2">The first day of the conference is focused on dark patterns for ecommerce.</p>
          <div class="text-center divide-y">
            <div class="py-8">
              <h3 class="text-blue-700  text-xl mb-2">Steven McHail</h3>
              <p class="text-blue-900 ">Not so one-time payments</p>
              <p class="text-blue-900/50  text-sm ">9:00AM - 10:00AM PST</p>
            </div>
            <div class="py-8">
              <h3 class="text-blue-700 text-xl mb-2">Steven McHail</h3>
              <p class="text-blue-900 ">Not so one-time payments</p>
              <p class="text-blue-900/50  text-sm ">9:00AM - 10:00AM PST</p>
            </div>
            <div class="py-8">
              <h3 class="text-blue-700 text-xl mb-2">Steven McHail</h3>
              <p class="text-blue-900 ">Not so one-time payments</p>
              <p class="text-blue-900/50  text-sm ">9:00AM - 10:00AM PST</p>
            </div>
            <div class="py-8">
              <h3 class="text-blue-700 text-xl mb-2">Steven McHail</h3>
              <p class="text-blue-900 ">Not so one-time payments</p>
              <p class="text-blue-900/50  text-sm ">9:00AM - 10:00AM PST</p>
            </div>
            <div class="py-8">
              <h3 class="text-blue-700 text-xl mb-2">Steven McHail</h3>
              <p class="text-blue-900 ">Not so one-time payments</p>
              <p class="text-blue-900/50  text-sm ">9:00AM - 10:00AM PST</p>
            </div>
          </div>
        </li>
        <li class="bg-white/80 p-4  backdrop-blur  shadow-xl">
          <h3 class="text-blue-700   text-xl mb-2">April 4</h3>
          <p class="text-blue-900   lg:text mb-2">The first day of the conference is focused on dark patterns for ecommerce.</p>
          <div class="text-center divide-y">
            <div class="py-8">
              <h3 class="text-blue-700  text-xl mb-2">Steven McHail</h3>
              <p class="text-blue-900 ">Not so one-time payments</p>
              <p class="text-blue-900/50  text-sm ">9:00AM - 10:00AM PST</p>
            </div>
            <div class="py-8">
              <h3 class="text-blue-700 text-xl mb-2">Steven McHail</h3>
              <p class="text-blue-900 ">Not so one-time payments</p>
              <p class="text-blue-900/50  text-sm ">9:00AM - 10:00AM PST</p>
            </div>
            <div class="py-8">
              <h3 class="text-blue-700 text-xl mb-2">Steven McHail</h3>
              <p class="text-blue-900 ">Not so one-time payments</p>
              <p class="text-blue-900/50  text-sm ">9:00AM - 10:00AM PST</p>
            </div>
            <div class="py-8">
              <h3 class="text-blue-700 text-xl mb-2">Steven McHail</h3>
              <p class="text-blue-900 ">Not so one-time payments</p>
              <p class="text-blue-900/50  text-sm ">9:00AM - 10:00AM PST</p>
            </div>
            <div class="py-8">
              <h3 class="text-blue-700 text-xl mb-2">Steven McHail</h3>
              <p class="text-blue-900 ">Not so one-time payments</p>
              <p class="text-blue-900/50  text-sm ">9:00AM - 10:00AM PST</p>
            </div>
          </div>
        </li>
        <li class="bg-white/80 p-4  backdrop-blur  shadow-xl">
          <h3 class="text-blue-700   text-xl mb-2">April 4</h3>
          <p class="text-blue-900   lg:text mb-2">The first day of the conference is focused on dark patterns for ecommerce.</p>
          <div class="text-center divide-y">
            <div class="py-8">
              <h3 class="text-blue-700  text-xl mb-2">Steven McHail</h3>
              <p class="text-blue-900 ">Not so one-time payments</p>
              <p class="text-blue-900/50  text-sm ">9:00AM - 10:00AM PST</p>
            </div>
            <div class="py-8">
              <h3 class="text-blue-700 text-xl mb-2">Steven McHail</h3>
              <p class="text-blue-900 ">Not so one-time payments</p>
              <p class="text-blue-900/50  text-sm ">9:00AM - 10:00AM PST</p>
            </div>
            <div class="py-8">
              <h3 class="text-blue-700 text-xl mb-2">Steven McHail</h3>
              <p class="text-blue-900 ">Not so one-time payments</p>
              <p class="text-blue-900/50  text-sm ">9:00AM - 10:00AM PST</p>
            </div>
            <div class="py-8">
              <h3 class="text-blue-700 text-xl mb-2">Steven McHail</h3>
              <p class="text-blue-900 ">Not so one-time payments</p>
              <p class="text-blue-900/50  text-sm ">9:00AM - 10:00AM PST</p>
            </div>
            <div class="py-8">
              <h3 class="text-blue-700 text-xl mb-2">Steven McHail</h3>
              <p class="text-blue-900 ">Not so one-time payments</p>
              <p class="text-blue-900/50  text-sm ">9:00AM - 10:00AM PST</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <img
        src="https://keynote.tailwindui.com/_next/static/media/background.6c3571e0.jpg"
        class="absolute  w-full h-screen   bottom-0 right-0 sm:w-1/2 sm:-translate-x-1/3 opacity-30"
      />
  </div>
</template>
<script lang="ts" setup>
import LogoSvg from "./components/LogoSvg.vue";
</script>
